<template>
    <div id="aplayer"></div>
</template>

<script setup>
    import APlayer from 'aplayer'; // 引入音乐插件
    import 'APlayer/dist/APlayer.min.css';
    import { defineProps, onMounted } from 'vue';

    let route = useRoute();

    const props = defineProps({
        audioArray: Array
    });
    console.log(props.audioArray);
    onMounted(() => {
        initData();
    });

    onBeforeUnmount(() => {
        ap.destroy();
    });

    function initData() {
        let data = [];
        let currentAudioIndex = 0;
        props.audioArray.forEach((item, index) => {
            //if (item.name === fileDataStore.currentClickRow.name) {
            currentAudioIndex = index;
            //}
            data.push({
                name: item.name,
                artist: ' ',
                url: item.url,
                cover: ''
            });
        });

        initAudio(data, currentAudioIndex);
    }

    // 当前播放的音频所在路径
    let currPath = '';

    // 当前播放视频的实例
    let ap;

    /**
     * 初始化音频组件
     * @param data      音频列表
     * @param index     默认播放第 N 首
     */
    let initAudio = (data, index) => {
        // 如果音频列表为空，则直接返回
        if (data.length === 0) {
            return;
        }

        // 如果已经初始化过，则直接切换播放列表
        if (ap) {
            // 如果当前播放列表和之前一样，则不重新修改播放列表
            if (currPath !== route.params.fullpath) {
                ap.list.clear();
                ap.list.add(data);
            }
            currPath = route.params.fullpath;
            ap.list.switch(index);
            ap.play();
        } else {
            // 创建一个音乐播放器实例，并挂载到 DOM 上，同时进行相关配置
            const el = document.getElementById('aplayer');
            ap = new APlayer({
                container: el,
                audio: data, // 音乐播放列表
                fixed: true, // 开启吸底模式
                autoplay: false, // 不开启自动播放
                preload: 'none', // 不预先加载
                loop: 'none'
            });

            // 移除无用按钮, 添加按钮备注, 隐藏歌词功能
            el.getElementsByClassName('aplayer-miniswitcher')[0].click();
            el.getElementsByClassName('aplayer-icon-order')[0].setAttribute('title', '播放顺序');
            el.getElementsByClassName('aplayer-icon-loop')[0].style.display = 'none'; //.setAttribute('title', '循环模式');
            el.getElementsByClassName('aplayer-icon-menu')[0].setAttribute('title', '播放列表');
            el.getElementsByClassName('aplayer-icon-lrc')[0].style.display = 'none';
            ap.play();
            currPath = route.params.fullpath;
        }
    };
</script>

<style scoped></style>
